<template>
    <!-- 设置 -->
    <div class="config">
        <div class="tab-menu">
            <template v-for="(item, index) in tabList">
                <div
                    class="tab-item"
                    v-if="item.isShow"
                    :key="index"
                    :class="activeTab === item.key ? 'active' : ''"
                    @click="handelTabClick(item)"
                >
                    {{ item.name }}
                </div>
            </template>
        </div>
        <div class="tab-contener">
            <div class="formset-contener" v-if="activeTab === 'formSet'">
                <form-setting />
            </div>
            <div class="comset-contener" v-if="activeTab === 'comSet'">
                <com-setting :curryCom="activeCol" />
            </div>
        </div>
    </div>
</template>
<script>
import FormSetting from './formSetting/index.vue'
import ComSetting from './comSetting/index.vue'
export default {
    components: {
        FormSetting,
        ComSetting
    },
    data() {
        return {
            tabList: [
                {
                    name: '表单设置',
                    key: 'formSet',
                    isShow: true
                },
                {
                    name: '组件设置',
                    key: 'comSet',
                    isShow: false
                }
            ],
            activeTab: 'formSet',
            // 当前选中的控件
            activeCol: {}
        }
    },
    mounted() {
        this.$bus.$on('ActiveItem', async col => {
            if (
                JSON.stringify(col) !== '{}' &&
                JSON.stringify(col.value) !== '{}'
            ) {
                this.activeCol = col
                this.tabList.forEach(ele => {
                    if (ele.key === 'comSet') {
                        ele.isShow = true
                        this.handelTabClick(ele)
                    }
                })
            } else {
                this.activeCol = {}
                this.tabList.forEach(ele => {
                    if (ele.key === 'comSet') {
                        ele.isShow = false
                    } else {
                        this.handelTabClick(ele)
                    }
                })
            }
        })
    },
    methods: {
        handelTabClick(item) {
            this.activeTab = item.key
        }
    }
}
</script>
<style lang="scss" scoped>
.config {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );
    .tab-menu {
        @include box_flex(
            $width: 100%,
            $height: 42px,
            $direction: row,
            $justify: flex-start,
            $align: center
        );
        @include border_color_only(
            $direction: bottom,
            $type: solid,
            $width: 1px,
            $color: 'border-base'
        );
        .tab-item {
            @include box_flex(
                $width: auto,
                $height: 100%,
                $direction: row,
                $justify: center,
                $align: center
            );

            margin: 0 $margin-md;
            transition: all 0.3s;
            cursor: pointer;
            @include border_color_only(
                $direction: bottom,
                $type: solid,
                $width: 2px,
                $color: 'color-t'
            );
        }
        .tab-item.active {
            @include font_color('primary');
            @include border_color_only(
                $direction: bottom,
                $type: solid,
                $width: 2px,
                $color: 'primary'
            );
        }
    }
    .tab-contener {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: column,
            $justify: flex-start,
            $align: flex-start,
            $flex-1: 1
        );
        > div {
            @include box_flex(
                $width: 100%,
                $height: 100%,
                $direction: column,
                $justify: flex-start,
                $align: flex-start
            );
        }
    }
}
</style>
